<template>
  <div class="login">
    <h1>欢迎登录宝洁SFA系统</h1>
    <div class="top_hat"></div>
    <div class="login-box">
      <!-- logo -->
		<div class="logo-wrap"><div class="logo-box"></div></div>
		<!-- 登录的表达 -->
			<!-- 员工编号 -->
			<div class="input-group" :class="{active:act_index===1}">
			  <label for="PNO">员工编号:</label>
			  <input @focus="actindex(1)" 
				type="number" id="cm_code" v-model="cm_code"/>
			</div>
			<!-- 公司编号 -->
			<div class="input-group" :class="{active:act_index===2}">
					<label for="cm_code">公司编号:</label>
					<input @focus="actindex(2)" name="pno" type="number" id="PNO" v-model="PNO"/>
			</div>
			<!-- 用户密码 -->
			 <div class="input-group" :class="{active:act_index===3}">
				 <label for="Passwd">用户密码:</label>
				 <input @focus="actindex(3)" type="password" name="pwd" id="Passwd" v-model="passwd"/>
			</div>		
			<!-- 记住密码 -->
			<div class="ck-row">
				<div class="chbox_wrp"	@click="remembindex()" :class="{'active':rememb}">
					<i class="iconfont"	:class="{'icon-check-square':rememb,'icon-border':!rememb}"></i>
					<span>记住密码</span>
				</div>
				<div class="chbox_wrp" @click="autoindex()" :class="{'active':autologin}">
					<i class="iconfont" :class="{'icon-check-square':autologin,'icon-border':!autologin}"></i>
					<span>自动登陆</span>
				</div>
			</div>

		</div>
		<!-- 登陆按钮 -->
	<div class="btn-wrap" @click="loginBtnClick">
		<p>登陆</p>
	</div>
		
  </div>
</template>

<script>
// import '../assets/font/iconfont.css'
import axios from 'axios'
import {mapGetters, mapMutations, mapActions} from 'vuex'
import { Indicator , Toast} from 'mint-ui';
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化

export default {
	name: 'login',
	data () {
		return { 
			act_index:1,
			cm_code:"",
			PNO:"",
			passwd: '',
			rememb:false,//记住密码
			autologin:false//自动登陆
		}
		
	},
	created() {
		let data = JSON.parse(localStorage.getItem('login_data'));
		if (data) {
		  this.cm_code = data.CNO;
		  this.passwd = data.Passwd;
		  this.PNO = data.PNO;
		  this.autologin = data.autologin;
		  this.rememb = data.rememb;
		  // 强制执行校验
		}
		if (this.autologin) {
			console.log("ppp")
			setTimeout(()=>{
				Indicator.open("3秒跳转");
				this.loginBtnClick(); // 方法就是登录				  
			},3000)
		}
	},
	mouted(){
		
	},
	methods:{
	   ...mapMutations([
		  'initUser'
		]),
		actindex(index){  //输入框变色
			this.act_index=index
		},
		remembindex(){ //记住密码
			this.rememb=!this.rememb
			!this.rememb&&(this.autologin=false)
		},
		autoindex(){//自动登陆
			// 设置当前的autologin为true或者false，
			this.autologin=!this.autologin
			// 另外设置 rememb的值
			this.autologin&&(this.rememb=true)
		},
		loginBtnClick(){//登陆按钮
			//弹出遮罩层 'https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/typeGoods')
			// 'http://yapi.demo.qunar.com/mock/41565/api/login'
			Indicator.open("正在登陆");
			axios.get(
				'http://yapi.demo.qunar.com/mock/41565/api/login'	
				,{
				cno:this.cm_code,
				pno:this.PNO,
				passwd:this.passwd
			})
			.then(res=>{
				if(res.status){
					console.log("resd999",res)
					localStorage.setItem("login_data",JSON.stringify({
					rememb: this.rememb,
					autologin: this.autologin,
					PNO: this.rememb ? this.PNO : '',
					CNO: this.rememb ? this.cm_code : '',
					Passwd: this.rememb ? this.passwd : ''
				  }))
				  // 把当前登陆的用户信息放到 sesstionStoreage里面一份。
				  sessionStorage.setItem('LoginUser', JSON.stringify(res.data.user));
				  sessionStorage.setItem('LoginToken', res.data.token);
				  console.log("resd0000999",res.data.token)
			
					this.initUser(res.data.user)
					this.$router.push("/home")
				}else{
					Toast({
					  message: '用户名密码不正确,登录失败!',
					  duration: 5000
					});
				}
				Indicator.close();
			})
			.catch(err=>{
				Toast({
				  message: '登录异常失败!',
				  duration: 5000
				});
				Indicator.close();
			})
		}
		
	}
}
</script>



<style lang="scss" scoped>
	/* @import "../lib/hotcss/px2rem.scss"; */
@import "../assets/font/iconfont.css";
.login{
  background-color: #2ade69;
  height: 100%;
	h1{
	  text-align: center;
	  font-size: px2rem(36);
	  height: px2rem(36);
	  padding:px2rem(148-36-44) 0 px2rem(44)
	}
	@mixin login-wrap{
		width: px2rem(600);
		margin: 0 auto;
		background-color: #fff;
		border-radius: px2rem(20);
	}
	.top_hat {
		width: px2rem(537);
		height: px2rem(18);
		background-color: #eee;
		margin: 0 auto;
		border-radius: px2rem(18) px2rem(18) 0 0;
	}
	.login-box {
		@include login-wrap();
		height: px2rem(836);
	.logo-wrap {
		padding: px2rem(80) 0;
		.logo-box {
			width: px2rem(190);
			height: px2rem(190);
			margin: 0 auto;
			background: url(../assets/logo.jpg);
			background-size: cover;
		}
	}
	@mixin rowstyle(){
		padding: 0 px2rem(36);
		color:$text-color;
		width: px2rem(473-36*2);
	}
	.input-group{
		border: 2px solid $inp-borede;
		border-radius:px2rem(45);
		font-size: $text-size-mid;
		line-height: px2rem(90);
		display: flex;
		align-items: center;
		@include rowstyle();
		margin: 0 auto px2rem(24);
		input{
			border: 0 none;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: px2rem(40);
			height: px2rem(40);
			width: px2rem(200);
			font-size: px2rem(28);
			border: 1px solid transparent;
			padding-left: 1rem;
		}
		&.active{
			color: $act-color;
			border: 2px solid $act-color;
		}
		// &.erroe{
		// 	color: red;
		// 	border: 2px solid red;
		// }
	}
	.ck-row{
		@include rowstyle();
		font-size: $text-size;
		display: flex;
		justify-content:space-around;
		.chbox_wrp{
			display: flex;
			align-items: center;
			padding-left:px2rem(45);
			padding-top: px2rem(8);
			i::before{
				display: inline-block;
				height: px2rem(30);
				font-size:px2rem(30);
				width: px2rem(30);
				line-height:px2rem(30);
				margin-right: px2rem(8);
			}
			&.active{
				color: $act-color;
			}
		}
	}
	} 
	.btn-wrap{
		@include login-wrap();
		height:px2rem(100);
		line-height: px2rem(100);
		font-size: $text-size-imp;
		color: $act-color;
		text-align: center;
		margin-top: px2rem(20);
		font-weight: 700;
		letter-spacing: px2rem(10);
	}
}
</style>

<style lang="scss" >
html,body,#app{
  height: 100%;
}
</style>